<!-- 账户资讯查询 -->
<template>
        <div>
            <bfe-dialog :title="$t('stm.suppressionConfig.AcctNoQuery')" :visible.sync="showFlag" @close="handCancel" :close-on-click-modal="false" width="70%">
                <div>
                    <div class="searchForm">
                        <bfe-form ref="formObj" class="container" :rules="formRules" :model="formObj" label-position="left" v-loading="loading">
                            <!-- 銀行名稱 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.bankId')" prop="bankId" :label-width="language === 'zh_TW' ? '96px' : '121px'">
                              <bfe-select  v-model="formObj.bankId" :placeholder="$t('stm.validateTip.pleaseInput')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in bankIdObj[language]" :key="item.key + index" :label="item.value" :value="item.key" />
                              </bfe-select>  
                            </bfe-form-item>
                             <!-- 賬號 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.acctNo')" prop="acctNo" :label-width="language === 'zh_TW' ? '96px' : '121px'" >
                                <bfe-input v-model="formObj.acctNo" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                            </bfe-form-item>
                             <!-- 賬戶行號 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.branchNo')" prop="branchNo" :label-width="language === 'zh_TW' ? '96px' : '121px'" >
                                <bfe-input v-model="formObj.branchNo" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                            </bfe-form-item>
                            <!-- 賬戶狀態 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.currSts')" prop="currSts" :label-width="language === 'zh_TW' ? '96px' : '93px'">
                               <bfe-select  v-model="formObj.currSts" :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small"  style="width: 210px;margin-left: 10px;">
                                  <bfe-option v-for="(item, index) in selectObj['currSts'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                               </bfe-select>
                            </bfe-form-item>    
                            <!-- 賬戶類型 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.certNo')" prop="certNo" :label-width="language === 'zh_TW' ? '96px' : '121px'" >
                                <bfe-input v-model="formObj.certNo" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                            </bfe-form-item>
                            <!-- 產品子類 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.intCat')" prop="intCat" :label-width="language === 'zh_TW' ? '96px' : '121px'" >
                                <bfe-input v-model="formObj.intCat" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                            </bfe-form-item>
                            <!-- 客戶號 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.cstId')" prop="cstId" :label-width="language === 'zh_TW' ? '96px' : '121px'" >
                                <bfe-input v-model="formObj.cstId" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                            </bfe-form-item>   
                            <!-- 開戶日期开始 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.openDtStart')" prop="openDt"  :label-width="language === 'zh_TW' ? '96px' : '121px'">
                                <bfe-date-picker  v-model="formObj.openDt" type="date" :editable="true"  :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small" style="width: 210px;margin-left: 10px;" format ></bfe-date-picker>
                            </bfe-form-item>
                             <!-- 開戶日期结束 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.openDtEnd')" prop="openDtEnd"  :label-width="language === 'zh_TW' ? '96px' : '121px'">
                                <bfe-date-picker v-model="formObj.openDtEnd" type="date" :editable="true"  :placeholder="$t('stm.validateTip.pleaseSelect')" size="small" style="width: 210px;margin-left: 10px;"  format></bfe-date-picker>
                            </bfe-form-item>    
                            <!-- 卡號 -->
                            <bfe-form-item :label="$t('stm.suppressionConfig.cardNo')" prop="cardNo" :label-width="language === 'zh_TW' ? '96px' : '121px'" >
                                <bfe-input v-model="formObj.cardNo" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                            </bfe-form-item>                                                      
                        </bfe-form>
                        <bfe-button type="primary" @click="handQuery" :loading="loading">{{ $t('stm.btn.query') }}</bfe-button>
                        <bfe-button @click="handReset">{{ $t('stm.btn.reset') }}</bfe-button>
                    </div>
                    <RadioTable 
                        ref="radioTable" 
                        v-if="showFlag" 
                        :columns="AcctNoQueryList"
                        :hasSearch="true" 
                        :searchObj="{searchObj}" 
                        api="_01_STM002SUPPRESS1200" 
                        optCode="STM002GET1205" 
                        :tabHeight="tabHeight"
                        />
                </div>
                <span slot="footer" class="dialog-footer">
                    <bfe-button @click="handCancel">{{ $t('stm.btn.cancel') }}</bfe-button>
                    <bfe-button type="primary" @click="handConfirm" :loading="loading">{{ $t('stm.btn.confirm') }}</bfe-button>
                </span>
            </bfe-dialog>
        </div>
    </template>
    
    <script>
    import moment from 'moment';
    import RadioTable from '@stm/components/RadioTable'
    import {AcctNoQueryList} from './config'
    import {mapState} from 'vuex';
    
    export default {
        props: {
            selectObj: {
                type: Object,
                default: () => {}
            },
            bankIdObj: {
                  type: Object,
                   default: () => ({
                        zh_TW: [], // 中文繁体语言的数据
                        en_US: []  // 英文语言的数据
                    })
            }
        },    
        components: {
            RadioTable
        },
        data() {
            return {
                showFlag: false,
                AcctNoQueryList,
                loading: false,
                tabHeight: document.body.clientHeight * 0.7 - 224,
                formObj: {
                    ehrNo: '', 
                    empeName: '',
                    empeEnName: ''
                },
                formRules: {},
            }
        },
        computed: {
            ...mapState({
                language: state => state.base.language || 'zh_TW',
            }),
            searchObj() {
                return {
                        ...this.formObj,
                        openDt: this.formObj.openDt ? moment(this.formObj.openDt).format('YYYYMMDD') : null,
                        openDtEnd: this.formObj.openDtEnd ? moment(this.formObj.openDtEnd).format('YYYYMMDD') : null,
               };
            }
        },
        methods: {
            initPage(){
                this.showFlag = true
            },
            handCancel(){
                this.handReset()
                this.showFlag = false
            },
            handConfirm(){
                const selectRow = _.cloneDeep(this.$refs.radioTable.selectObj)
               console.log(selectRow, '获取选中的selectRow===')
                let arr = Object.keys(selectRow)
                if(!arr.length){
                    this.$message.warning(this.$t('stm.handleTips.selectOne'))
                    return
                }
                this.$emit('setAcctNoInfo', selectRow)
                this.handCancel()
            },
            handQuery(){
                const radioTable = this.$refs.radioTable
                radioTable.getPageData()
            },
            handReset(){
                this.$refs.formObj.resetFields()
                this.$refs.radioTable.selectVal = null
                this.formObj = {}
            }
        }
    }
    </script>
    
    <style lang="less" scoped>
    .searchForm{
        width: 100%; 
        float: left;
        >span{
            display: inline-block;
            height: 30px;
            line-height: 30px;
        }
        margin-bottom: 16px;
        /deep/.giop-button{
            padding: 7px 12px;
        }
        /deep/.giop-form-item{
            float: left;
            margin-right: 52px;
            margin-bottom: 0;
        }
        /deep/.giop-form{
            float: left;
            margin-left: -15px;
        }
        /deep/.giop-button{
            margin-top: 3px;
        }
    }
    </style>